<template>
  <div id="table" ref="table">
    <!-- table -->
    <div :style="{ height: height }" class="box">
      <!--  table左上角固定的部分 -->
      <div class="table_search" v-if="hide == true" :class="searchBox == true ? '' : 'table_head_noseach'">
        <table class="table table-hover dataTable">
          <tr align="left" style="background-color: rgb(241, 242, 243)">
            <th style="width: 4%" v-if="hide == true">
              <div v-if="searchBox == true" class="search_btn">
                <i @click="findData($event)" class="el-icon-search" v-if="inputSearch == true"></i>
                <i @click="delSearchData($event)" class="el-icon-delete" v-if="inputSearch == true"></i>
              </div>
            </th>
            <template v-for="(item, index) in config">
              <th :key="index">
                <div class="table_th_title" :style="{ width: calcWidth(6, item.label, 14, item.width) }">
                  {{ $t(item.label) }}
                </div>
                <div v-if="inputSearch == true" class="search_input">
                  <input :disabled="item.disabled" class="text" type="text" v-if="item.input == 'input'" v-model="searhData[item.searh ? item.searh : item.prop]" />
                  <el-select v-if="item.input == 'select'" :disabled="item.disabled" placeholder=" " v-model="searhData[item.searh ? item.searh : item.prop]">
                    <el-option label="" value=""></el-option>
                    <el-option v-for="(i, id) in item.options" :key="id" :label="i.description" :value="i.code">
                    </el-option>
                  </el-select>
                  <el-date-picker :disabled="item.disabled" class="input_date" placeholder prefix-icon="" type="datetime" v-if="item.input == 'date'"
                    v-model="searhData[item.searh ? item.searh : item.prop]"></el-date-picker>
                </div>
              </th>
            </template>
          </tr>
        </table>
      </div>
      <!--  table固定的头部 -->
      <div class="table_head" :class="searchBox == true ? '' : 'table_head_noseach'">
        <table class="table table-hover dataTable">
          <tr align="left" style="background-color: rgb(241, 242, 243)">
            <th style="width: 4%" v-if="hide == true">
              <div class="table_checkbox">
                <input class="checkbox" type="checkbox" v-if="checkedFlag == true" />
              </div>
              <div v-if="searchBox == true" class="search_btn">
                <i class="el-icon-search" v-if="inputSearch == true"></i>
                <i class="el-icon-delete" v-if="inputSearch == true"></i>
              </div>
            </th>
            <template v-for="(item, index) in config">
              <th :key="index">
                <div class="table_th_title" :style="{ width: calcWidth(6, item.label, 14, item.width) }">
                  {{ $t(item.label) }}
                </div>
                <div v-if="inputSearch == true" class="search_input">
                  <input :disabled="item.disabled" @change="
                      search(
                        item.prop,
                        item.input,
                        searhData[item.prop],
                        item.searh
                      )
                    " @keydown.enter="findData" class="text" type="text" v-if="item.input == 'input'" v-model="searhData[item.searh ? item.searh : item.prop]" />
                  <template v-if="item.input == 'select'">
                    <el-select v-if="item.multiple" multiple collapse-tags :disabled="item.disabled" @change="
                        search(
                          item.prop,
                          item.input,
                          searhData[item.prop],
                          item.searh
                        )
                      " v-model="searhData[item.searh ? item.searh : item.prop]">
                      <el-option v-for="(i, id) in item.options" :key="id" :label="i.description" :value="i.code"></el-option>
                    </el-select>
                    <el-select v-else :disabled="item.disabled" @change="
                        search(
                          item.prop,
                          item.input,
                          searhData[item.prop],
                          item.searh
                        )
                      " placeholder=" " v-model="searhData[item.searh ? item.searh : item.prop]">
                      <el-option label="" value=""></el-option>
                      <el-option v-for="(i, id) in item.options" :key="id" :label="i.description" :value="i.code">
                      </el-option>
                    </el-select>
                  </template>
                  <el-date-picker :disabled="item.disabled" @change="
                      search(
                        item.prop,
                        item.input,
                        searhData[item.prop],
                        item.searh
                      )
                    " @keydown.enter="findData" class="input_date" placeholder prefix-icon="" type="datetime" v-if="item.input == 'date'" v-model="searhData[item.searh ? item.searh : item.prop]"
                    value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </div>
              </th>
            </template>
          </tr>
          <tr :key="index" v-for="(item, index) in tableData">
            <td v-if="hide == true" style="width: 4%">
              <div class="table_operation">
                <input class="smallSelect" type="checkbox" v-if="checkedFlag == true" />
                <i class="el-icon-edit" :title="$t('common.detail')" v-if="detailsFlag == true"></i>
                <i class="el-icon-check" v-if="rightFlag != false"></i>
              </div>
            </td>
            <template v-for="(config, idx) in config">
              <td :key="idx">
                <div class="table_text" style v-if="config.input == 'date'">
                  <template v-if="config.editable">
                    <el-date-picker class="input_date" placeholder prefix-icon="" type="datetime" v-model="item[config.prop]"></el-date-picker>
                  </template>
                  <template v-else>{{
                    item[config.prop] | crtTimeFtt
                  }}</template>
                </div>
                <div class="table_text" v-else-if="config.input == 'select'">
                  <span v-if="config.checkbox">
                    <input type="checkbox" v-model="item[config.prop]" @change="check($event, item, config.prop)" />
                  </span>
                  <template v-if="config.editable">
                    <el-select v-model="item[config.prop]">
                      <el-option label="" value=""></el-option>
                      <el-option v-for="i in config.options" :key="i.code" :label="i.description" :value="i.code">
                      </el-option>
                    </el-select>
                  </template>
                  <span v-else>{{
                    transition(item[config.prop], config.prop)
                  }}</span>
                </div>
                <div class="table_text" v-else>
                  <template v-if="config.editable">
                    <el-input v-model="item[config.prop]"></el-input>
                  </template>
                  <template v-else>{{ item[config.prop] }}</template>
                  <el-select :disabled="item.disabled" @change="
                      search(
                        item.prop,
                        item.input,
                        searhData[item.prop],
                        item.searh
                      )
                    " v-if="item.input == 'select'" placeholder=" " v-model="searhData[item.searh ? item.searh : item.prop]">
                    <el-option label="" value=""></el-option>
                    <el-option v-for="i in item.options" :key="i.code" :label="i.description" :value="i.code">
                    </el-option>
                  </el-select>
                  <el-date-picker :disabled="item.disabled" @change="
                      search(
                        item.prop,
                        item.input,
                        searhData[item.prop],
                        item.searh
                      )
                    " @keydown.enter="findData" class="input_date" placeholder prefix-icon="" type="datetime" v-if="item.input == 'date'" v-model="searhData[item.searh ? item.searh : item.prop]">
                  </el-date-picker>
                </div>
              </td>
            </template>
          </tr>
        </table>
      </div>
      <!--  table固定的内容 -->
      <div class="table_content" :class="searchBox == true ? '' : 'table_content_noseach'" @scroll="handleScroll($event)">
        <table class="table table-hover dataTable">
          <tr align="left" style="background-color: rgb(241, 242, 243);">
            <th style="width: 4%" v-if="hide == true">
              <div class="table_checkbox">
                <input class="checkbox" type="checkbox" v-if="checkedFlag == true" />
              </div>
              <div v-if="searchBox == true" class="search_btn">
                <i class="el-icon-search" v-if="inputSearch == true"></i>
                <i class="el-icon-delete" v-if="inputSearch == true"></i>
              </div>
            </th>
            <template v-for="(item, index) in config">
              <th :key="index">
                <div class="table_th_title" :style="{ width: calcWidth(6, item.label, 14, item.width) }">
                  {{ $t(item.label) }}
                </div>
                <div v-if="inputSearch == true" class="search_input">
                  <input :disabled="item.disabled" @change="
                      search(
                        item.prop,
                        item.input,
                        searhData[item.prop],
                        item.searh
                      )
                    " @keydown.enter="findData" class="text" type="text" v-if="item.input == 'input'" v-model="searhData[item.searh ? item.searh : item.prop]" />
                  <el-select :disabled="item.disabled" @change="
                      search(
                        item.prop,
                        item.input,
                        searhData[item.prop],
                        item.searh
                      )
                    " v-if="item.input == 'select'" placeholder=" " v-model="searhData[item.searh ? item.searh : item.prop]">
                    <el-option label="" value=""></el-option>
                    <el-option v-for="(i, id) in item.options" :key="id" :label="i.description" :value="i.code">
                    </el-option>
                  </el-select>
                  <el-date-picker :disabled="item.disabled" @change="
                      search(
                        item.prop,
                        item.input,
                        searhData[item.prop],
                        item.searh
                      )
                    " @keydown.enter="findData" class="input_date" placeholder prefix-icon="" type="datetime" v-if="item.input == 'date'" v-model="searhData[item.searh ? item.searh : item.prop]">
                  </el-date-picker>
                </div>
              </th>
            </template>
          </tr>
          <tr :key="index" v-for="(item, index) in tableData" @click="removeEdit($event)">
            <td v-if="hide == true" style="width: 4%">
              <div class="table_operation">
                <input class="smallSelect" type="checkbox" v-if="checkedFlag == true" />
                <i class="el-icon-edit" :title="$t('common.detail')" v-if="detailsFlag == true"></i>
                <i class="el-icon-check" v-if="rightFlag != false"></i>
              </div>
            </td>
            <template v-for="(config, idx) in config">
              <td :key="idx">
                <div class="table_text" @dblclick="settabledata($event, item, config, index)" style v-if="config.input == 'date'">
                  <template v-if="config.editable">
                    <el-date-picker class="input_date" placeholder prefix-icon="" type="datetime" :disabled="item.disabled" v-model="item[config.prop]"></el-date-picker>
                  </template>
                  <template v-else>{{
                    item[config.prop] | crtTimeFtt
                  }}</template>
                </div>
                <div class="table_text" @dblclick="settabledata($event, item, config, index)" v-else-if="config.input == 'select'">
                  <span v-if="config.checkbox">
                    <input type="checkbox" v-model="item[config.prop]" @change="check($event, item, config.prop)" />
                  </span>
                  <template v-if="config.editable">
                    <el-select v-model="item[config.prop]" :disabled="item.disabled">
                      <el-option label="" value=""></el-option>
                      <el-option v-for="i in config.options" :key="i.code" :label="i.description" :value="i.code">
                      </el-option>
                    </el-select>
                  </template>
                  <span v-else>{{
                    transition(item[config.prop], config.prop)
                  }}</span>
                </div>
                <div class="table_text" @dblclick="settabledata($event, item, config, index)" v-else>
                  <template v-if="config.editable">
                    <el-input v-model="item[config.prop]" :disabled="item.disabled"></el-input>
                  </template>
                  <template v-else><span @click="handleClickCell(item,config)">{{ item[config.prop] }}</span></template>
                </div>
              </td>
            </template>
          </tr>
        </table>
      </div>
      <!--  table左边固定的按钮 勾选框 -->
      <div class="table_scroll" v-if="hide == true" :class="searchBox == true ? '' : 'table_content_noseach'">
        <table class="table table-hover dataTable">
          <tr align="left" style="background-color: rgb(241, 242, 243)">
            <th style="width: 4%" v-if="hide == true">
              <div class="table_checkbox">
                <input @click="bigSelect($event)" class="checkbox" type="checkbox" v-if="checkedFlag == true" />
              </div>
              <div v-if="searchBox == true" class="search_btn">
                <i @click="findData" class="el-icon-search" v-if="inputSearch == true"></i>
                <i @click="delSearchData" class="el-icon-delete" v-if="inputSearch == true"></i>
              </div>
            </th>
            <template v-for="(item, index) in config">
              <th :key="index">
                <div class="table_th_title" :style="{ width: calcWidth(6, item.label, 14, item.width) }">
                  {{ $t(item.label) }}
                  <!--                                @click.self="tableSort($event,item)"-->
                  <!-- <i class="el-icon-sort-down table_font_left"></i>
                            <i class="el-icon-sort-up table_font_right"></i>-->
                </div>
                <div v-if="inputSearch == true" class="search_input">
                  <input :disabled="item.disabled" @change="
                      search(
                        item.prop,
                        item.input,
                        searhData[item.prop],
                        item.searh
                      )
                    " @keydown.enter="findData" class="text" type="text" v-if="item.input == 'input'" v-model="searhData[item.searh ? item.searh : item.prop]" />
                  <el-select :disabled="item.disabled" @change="
                      search(
                        item.prop,
                        item.input,
                        searhData[item.prop],
                        item.searh
                      )
                    " v-if="item.input == 'select'" placeholder=" " v-model="searhData[item.searh ? item.searh : item.prop]">
                    <el-option label="" value=""></el-option>
                    <el-option v-for="(i, id) in item.options" :key="id" :label="i.description" :value="i.code">
                    </el-option>
                  </el-select>
                  <el-date-picker :disabled="item.disabled" @change="
                      search(
                        item.prop,
                        item.input,
                        searhData[item.prop],
                        item.searh
                      )
                    " @keydown.enter="findData" class="input_date" placeholder prefix-icon="" type="datetime" v-if="item.input == 'date'" v-model="searhData[item.searh ? item.searh : item.prop]">
                  </el-date-picker>
                </div>
              </th>
            </template>
          </tr>
          <tr :key="index" v-for="(item, index) in tableData">
            <td v-if="hide == true" style="width: 4%">
              <div class="table_operation">
                <input @click="selectData($event, index)" class="smallSelect" type="checkbox" v-if="checkedFlag == true" />
                <i @click.stop="setdialog(index)" class="el-icon-edit" :title="$t('common.detail')" v-if="detailsFlag == true"></i>
                <i @click.stop="amend(index)" class="el-icon-check" v-if="rightFlag != false"></i>
              </div>
            </td>
            <template v-for="(config, idx) in config">
              <td :key="idx">
                <div class="table_text" style v-if="config.input == 'date'">
                  {{ item[config.prop] | crtTimeFtt }}
                </div>
                <div class="table_text" v-else-if="config.input == 'select'">
                  <span v-if="config.checkbox">
                    <input type="checkbox" v-model="item[config.prop]" @change="check($event, item, config.prop)" />
                  </span>
                  <span v-else>{{
                    transition(item[config.prop], config.prop)
                  }}</span>
                </div>
                <div class="table_text" v-else>{{ item[config.prop] }}</div>
              </td>
            </template>
          </tr>
        </table>
      </div>
    </div>
    <!-- page -->
    <div class="page" v-if="pageFlag">
      <div class="pageCon" :style="{ border: pageDetail ? '1px solid #e0e6ed' : '0px' }">
        <template v-if="pageDetail">{{$t('app.page',{page,pageSize,total,num:Math.ceil(total / pageSize)})}}</template>
      </div>
      <div class="block">
        <el-pagination :current-page.sync="curPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange" background layout=" prev, pager, next"></el-pagination>
      </div>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
import bus from '../../bus/bus'
import baseMixin from '@/mixins/BaseMixin'
import * as XLSX from 'xlsx/xlsx.mjs'
//excel单次导入数量
export const excelImportSize = 100

export default {
  name: '',
  mixins: [baseMixin],
  //pageFlag 隐藏分页
  //pageDetail 隐藏分页明细
  props: {
    right: {
      type: Boolean,
      default: false
    },
    details: {
      type: Boolean,
      default: true
    },
    checked: {
      type: Boolean,
      default: true
    },
    searchFlag: {
      type: Boolean,
      default: true
    },
    height: {
      type: String,
      default: '720px'
    },
    tableConfig: {
      type: Array
    },
    tableData: {
      type: Array
    },
    pageSize: {
      type: Number
    },
    total: {
      type: Number
    },
    pageFlag: {
      type: Boolean,
      default: true
    },
    pageDetail: {
      type: Boolean,
      default: true
    },
    page: {
      type: Number,
      default: 1
    },
    statusData: {
      type: Array
    }
  },
  data() {
    return {
      value: [],
      config: this.tableConfig,
      eidtConfig: [],
      checkList: [],
      setConfigFlag: false,
      curPage: 1,
      //搜索开关
      inputSearch: true,
      searchBox: true,
      //单选框开关
      checkedFlag: true,
      //点击详情开关
      detailsFlag: true,
      //对号开关
      rightFlag: false,
      //保存搜索框的值
      searhData: {},
      checkTable: null,
      hide: true,
      arrStatus: {},
      checkedArr: [],
      checkedId: [],
      //可编辑内容
      clickbox: null,
      clickConfig: '',
      clickindex: '',
      clickFlag: false
    }
  },
  computed: {},
  created() {},
  methods: {
    handleClickCell(item, config) {
      this.$emit('handleClickCell', item, config)
    },
    editConfig() {
      this.setConfigFlag = true
    },
    editConfirm() {
      let hide = []
      let arr = []
      this.eidtConfig.forEach(item => {
        arr.push(item)
      })
      this.value.forEach(i => {
        hide.push(this.eidtConfig[i])
      })
      hide.forEach(i => {
        let index = arr.findIndex(item => {
          return item.label === i.label
        })
        if (index >= 0) {
          arr.splice(index, 1)
        }
      })
      this.config = arr
      this.setConfigFlag = false
    },
    removeEdit(e) {
      if (this.clickFlag) {
        if (e.target.className != 'table_text_input') {
          let edit = this.clickbox.childNodes[0]
          this.tableData[this.clickindex][this.clickConfig.prop] = edit.value
          if (this.clickConfig.verify) {
            let flag = this.clickConfig.verify(edit.value, this)
            if (typeof flag === 'object') {
              flag.then(res => {
                if (res) {
                  this.clear(edit)
                }
              })
            } else if (flag) {
              this.clear(edit)
            }
          } else {
            this.clear(edit)
          }
        }
      }
    },
    clear(edit) {
      this.clickbox.removeChild(edit)
      if (this.clickConfig.input === 'select') {
        this.clickbox.innerText = this.transition(
          edit.value,
          this.clickConfig.prop
        )
      } else if (this.clickConfig.input === 'date') {
        if (edit.value === '') {
          this.clickbox.innerText = edit.value
        } else {
          this.clickbox.innerText = this.crtTimeFtt(edit.value - 0)
        }
      } else if (this.clickConfig.input === 'input') {
        this.clickbox.innerText = edit.value
      } else if (!this.clickConfig.input) {
        this.clickbox.innerText = edit.value
      }
      this.clickbox = null
      this.clickFlag = false
      this.$emit('setEditData', this.tableData[this.clickindex])
    },
    settabledata(e, data, config, index) {
      let that = this
      if (!this.clickFlag) {
        if (config.eidtFlag) {
          this.clickbox = e.target
          this.clickConfig = config
          this.clickindex = index
          let edit
          if (config.input === 'select') {
            edit = document.createElement('select')
            edit.className = 'table_text_input'
            config.options.forEach((item, idx) => {
              let op = document.createElement('option')
              op.setAttribute('label', item.description)
              op.setAttribute('value', item.code)
              edit.appendChild(op)
            })
            edit.value = data[config.prop]
            this.clickbox.innerHTML = ''
          } else {
            edit = document.createElement('input')
            // edit.onchange = function () {
            // }
            edit.oninput = function() {
              // 触发此方法则说明选择的编辑框有值的变动 需要将当前行改为选中状态
              let table = that.$refs['table']
              let tableScroll = table.querySelector('.table_scroll')
              let smallSelect = tableScroll.querySelectorAll('.smallSelect')
              smallSelect[index].checked = true
              that.checkedArr.push(data)
              that.checkedId.push(index)
              that.checkedArr = Array.from(new Set(that.checkedArr))
              that.checkedId = Array.from(new Set(that.checkedId))
              that.$emit('selectData', that.checkedArr)
            }
            edit.className = 'table_text_input'
            edit.value = data[config.prop] ? data[config.prop] : ''
            this.clickbox.innerHTML = ''
          }
          this.clickbox.appendChild(edit)
          this.clickFlag = true
        }
      }
    },
    check(event, data, prop) {
      this.$emit('checked', event.target.checked, data, prop)
    },
    transition(data, prop) {
      let str = ''
      if (this.arrStatus != {}) {
        for (let i in this.arrStatus) {
          if (i == prop) {
            let id = this.arrStatus[i].findIndex(value => data == value.code)
            if (id >= 0) {
              str = this.$t(this.arrStatus[i][id].description)
            } else {
              str = data
            }
          }
        }
      }
      return str
    },
    //选中
    selectData(e, id) {
      this.checkTable =
        e.target.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
      let table =
        e.target.parentNode.parentNode.parentNode.parentNode.parentNode
          .parentNode
      let tableScroll = table.querySelector('.table_scroll')
      let smallSelect = tableScroll.querySelectorAll('.smallSelect')
      let table_search = table.querySelector('.table_search')
      let bigSelect = table_search.querySelector('.checkbox')
      let arr = []
      smallSelect.forEach(item => {
        arr.push(item)
      })
      let flag = arr.every(item => {
        return item.checked == true
      })
      if (bigSelect) {
        if (flag) {
          bigSelect.checked = true
        } else {
          bigSelect.checked = false
        }
      }
      if (e.target.checked) {
        this.checkedArr.push(this.$props.tableData[id])
        this.checkedId.push(id)
        this.$emit('selectData', this.checkedArr)
      } else {
        this.checkedArr.forEach((item, index) => {
          if (item == this.$props.tableData[id]) {
            this.checkedArr.splice(index, 1)
          }
        })
        this.checkedId.forEach((item, index) => {
          if (item == id) {
            this.checkedId.splice(index, 1)
          }
        })
        this.$emit('selectData', this.checkedArr)
      }
    },
    //计算宽
    calcWidth(basic, label, increment, width) {
      if (width) return width
      return basic + increment * label.length + 'px'
    },
    //搜索
    search(prop, type, value, searh) {
      if (searh) {
        if (type === 'date') {
          let d = new Date(value)
          let datetime = this.formatDate(d)
          this.searhData[searh] = datetime
        }
        if (value == '') {
          delete this.searhData[searh]
          this.$emit('searhData', this.searhData)
        } else {
          this.$emit('searhData', this.searhData)
        }
      } else {
        if (type === 'date') {
          let d = new Date(value)
          let datetime = this.formatDate(d)
          this.searhData[prop] = datetime
        }
        if (value == '') {
          delete this.searhData[prop]
          this.$emit('searhData', this.searhData)
        } else {
          this.$emit('searhData', this.searhData)
        }
      }
      if (type === 'date') {
        let d = new Date(value)
        let datetime = this.formatDate(d)
        this.searhData[prop] = datetime
      }
      if (value == '') {
        delete this.searhData[prop]
        this.$emit('searhData', this.searhData)
      } else {
        this.$emit('searhData', this.searhData)
      }
    },
    getFilterParams() {
      console.log(this.searhData, 'this.searhData')
      return this.searhData
    },
    //日期转字符串
    formatDate(date) {
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      let second = date.getSeconds()
      second = minute < 10 ? '0' + second : second
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
    },

    findData(event) {
      let table =
        event.target.parentNode.parentNode.parentNode.parentNode.parentNode
          .parentNode
      let table_search = table.querySelector('.table_search')
      let bigChecked = table_search.querySelector('.checkbox')
      if (bigChecked) {
        bigChecked.checked = false
      }
      let tableScroll = table.querySelector('.table_scroll')
      let smallSelect = tableScroll.querySelectorAll('.smallSelect')
      smallSelect.forEach(item => {
        item.checked = ''
      })
      this.checkedArr = []
      this.checkedId = []
      this.$emit('selectData', this.checkedArr)
      this.$emit('findData', 1, this.searhData)
    },
    delSearchData() {
      let table =
        event.target.parentNode.parentNode.parentNode.parentNode.parentNode
          .parentNode
      let table_search = table.querySelector('.table_search')
      let bigChecked = table_search.querySelector('.checkbox')
      if (bigChecked) {
        bigChecked.checked = false
      }
      let tableScroll = table.querySelector('.table_scroll')
      let smallSelect = tableScroll.querySelectorAll('.smallSelect')
      smallSelect.forEach(item => {
        item.checked = ''
      })
      this.checkedArr = []
      this.checkedId = []
      this.searhData = {}
      this.$emit('selectData', this.checkedArr)
      this.$emit('searhData', this.searhData, 'up')
    },
    bigSelect(e) {
      this.checkedId = []
      this.checkedArr = []
      let status = e.target
      this.checkTable =
        status.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
      let table =
        status.parentNode.parentNode.parentNode.parentNode.parentNode
          .nextSibling.nextSibling.nextSibling
      let smallSelect = table.querySelectorAll('.smallSelect')
      if (status.checked) {
        smallSelect.forEach(item => {
          item.checked = 'checked'
        })
        this.$props.tableData.forEach((item, index) => {
          this.checkedArr.push(item)
          this.checkedId.push(index)
        })
        this.$emit('selectData', this.checkedArr)
      } else {
        smallSelect.forEach(item => {
          item.checked = ''
        })
        this.$emit('selectData', this.checkedArr)
      }
    },
    setdialog(index) {
      let list = this.$props.tableData[index]
      this.$emit('setdialog', list)
    },
    handleCurrentChange(val) {
      let table = this.checkTable
      if (table) {
        let tableScroll = table.querySelector('.table_scroll')
        let smallSelect = tableScroll.querySelectorAll('.smallSelect')
        for (let i = 0; i < smallSelect.length; i++) {
          if (smallSelect[i].checked) {
            smallSelect[i].checked = ''
          }
        }
      }

      sessionStorage.setItem('page', val)
      if (this.$parent.tableSelectData) {
        this.$parent.tableSelectData = []
      }
      this.$emit('getTableData', val, this.searhData)
    },
    amend(index) {
      this.$emit('amend', index)
    },
    upData() {
      let table = document.querySelector('#table')
      let tableScroll = table.querySelector('.table_scroll')
      let smallSelect = tableScroll.querySelectorAll('.smallSelect')
      smallSelect.forEach(item => {
        if (item.checked) {
          item.checked = ''
        }
      })
      this.$emit('upData', this.page, this.searhData)
    },
    delSelectData(data, id) {
      let table = this.checkTable
      let tableScroll = table.querySelector('.table_scroll')
      let smallSelect = tableScroll.querySelectorAll('.smallSelect')
      let table_search = table.querySelector('.table_search')
      let bigSelect = table_search.querySelector('.checkbox')
      if (bigSelect) {
        bigSelect.checked = ''
      }
      if (data.length >= 0) {
        smallSelect.forEach(item => {
          if (item.checked) {
            item.checked = ''
          }
        })
        this.checkedArr = []
        this.checkedId = []
        this.$emit('selectData', this.checkedArr)
      } else {
        this.checkedArr.forEach((item, index) => {
          if (item == data) {
            let num = this.checkedId[index]
            if (smallSelect[num].checked) {
              smallSelect[num].checked = ''
            }
            this.checkedArr.splice(index, 1)
            this.checkedId.splice(index, 1)
            this.$emit('selectData', this.checkedArr)
          }
        })
      }
    },
    handleScroll: function(event) {
      let tabletitle = event.target.previousSibling
      let tableScroll = event.target.nextSibling
      if (tableScroll) {
        tableScroll.scrollTop = event.target.scrollTop
      }
      if (tabletitle) {
        tabletitle.scrollLeft = event.target.scrollLeft
      }
    },
    crtTimeFtt(value) {
      if (!value) return
      let crtTime = new Date(value)
      // return dateFtt("yyyy-MM-dd hh:mm:ss", crtTime); //直接调用公共JS里面的时间类处理的办法
      let fmt = 'yyyy-MM-dd hh:mm:ss'
      let date = crtTime
      let o = {
        'M+': date.getMonth() + 1, //月份
        'd+': date.getDate(), //日
        'h+': date.getHours(), //小时
        'm+': date.getMinutes(), //分
        's+': date.getSeconds(), //秒
        'q+': Math.floor((date.getMonth() + 3) / 3), //季度
        S: date.getMilliseconds() //毫秒
      }
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      for (var k in o)
        if (new RegExp('(' + k + ')').test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ('00' + o[k]).substr(('' + o[k]).length)
          )
      return fmt
    },
    setSearchData(prop, value) {
      this.searhData[prop] = value
    },
    readFile(file) {
      //文件读取
      return new Promise(resolve => {
        let reader = new FileReader()
        reader.readAsBinaryString(file) //以二进制的方式读取
        reader.onload = ev => {
          resolve(ev.target.result)
        }
      })
    },
    // 解析excel
    async excelParsing(file, range) {
      let data = await this.readFile(file)
      // 解析二进制格式数据 -- cellDates: true 处理时间格式
      let workbook = XLSX.read(data, { type: 'binary', cellDates: true })
      //  获取第一个Sheet
      let worksheet = workbook.Sheets[workbook.SheetNames[0]]
      // 读取文件内容，（第一个sheet里的内容）
      // range：设置从第几行开始读取内容 ; defval 为空时显示列值为空
      // json数据格式
      let result = XLSX.utils.sheet_to_json(worksheet, {
        range: range,
        defval: ''
      })
      // 最终解析的 json 格式数据:'
      return result
    },
    // 解析excel多个sheet
    async excelManySheetParsing(file, range) {
      let data = await this.readFile(file)
      // 解析二进制格式数据
      let workbook = XLSX.read(data, { type: 'binary' })

      const obj = {}
      let size = 'Size'
      let opts = { range: range, defval: '' }
      let sheetSize = workbook.SheetNames.length
      if (sheetSize > 1) {
        obj.isSubSheet = true
        obj.subSheetSize = sheetSize - 1
      }
      // 遍历多个sheet工作区
      workbook.SheetNames.forEach((item, index) => {
        if (index === 0) {
          // json数据格式
          obj.masterSheet = XLSX.utils.sheet_to_json(
            workbook.Sheets[item],
            opts
          )
          obj.masterSize = obj.masterSheet.length
        } else {
          let subName = 'subSheet' + index
          obj[subName] = XLSX.utils.sheet_to_json(workbook.Sheets[item], opts)
          obj[subName + size] = obj[subName].length
        }
      })
      return obj
    },
    uuid(len, radix) {
      var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split(
        ''
      )
      var uuid = [],
        i
      radix = radix || chars.length

      if (len) {
        // Compact form
        for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)]
      } else {
        // rfc4122, version 4 form
        var r

        // rfc4122 requires these characters
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'
        uuid[14] = '4'

        // Fill in random data.  At i==19 set the high bits of clock sequence as
        // per rfc4122, sec. 4.1.5
        for (i = 0; i < 36; i++) {
          if (!uuid[i]) {
            r = 0 | (Math.random() * 16)
            uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r]
          }
        }
      }
      return uuid.join('')
    }
  },
  filters: {
    //格式化时间
    crtTimeFtt(value) {
      if (!value) return
      let crtTime = new Date(value)
      // return dateFtt("yyyy-MM-dd hh:mm:ss", crtTime); //直接调用公共JS里面的时间类处理的办法
      let fmt = 'yyyy-MM-dd hh:mm:ss'
      let date = crtTime
      let o = {
        'M+': date.getMonth() + 1, //月份
        'd+': date.getDate(), //日
        'h+': date.getHours(), //小时
        'm+': date.getMinutes(), //分
        's+': date.getSeconds(), //秒
        'q+': Math.floor((date.getMonth() + 3) / 3), //季度
        S: date.getMilliseconds() //毫秒
      }
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      for (var k in o)
        if (new RegExp('(' + k + ')').test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ('00' + o[k]).substr(('' + o[k]).length)
          )
      return fmt
    }
  },
  mounted() {
    // this.searhData = this.statusData;
    sessionStorage.setItem('page', 1)
    this.eidtConfig = this.tableConfig
    this.tableConfig.forEach((item, i) => {
      this.checkList.push({
        key: i,
        label: item.label,
        config: item
      })
    })
    this.checkedFlag = this.$props.checked
    this.inputSearch = this.$props.searchFlag
    this.detailsFlag = this.$props.details
    this.rightFlag = this.$props.right
    this.searchBox = this.inputSearch
    if (
      this.inputSearch == false &&
      this.checkedFlag == false &&
      this.detailsFlag == false
    ) {
      this.hide = false
    } else if (this.rightFlag == false || this.detailsFlag == true) {
      this.hide = true
    }

    this.$props.tableConfig.forEach(item => {
      if (item.input == 'select') {
        this.arrStatus[item.prop] = item.options
      }
    })
    bus.$on('clearSearhData', () => {
      this.searhData = {}
    })

    bus.$on('statusData', res => {
      this.searhData.statusstr = res
    })
  },
  components: {},
  watch: {
    tableConfig: {
      handler(data) {
        data.forEach(item => {
          if (item.input == 'select') {
            this.arrStatus[item.prop] = item.options
          }
        })
        this.checkList = []
        this.config = data
        this.eidtConfig = data
        data.forEach((item, i) => {
          this.checkList.push({
            key: i,
            label: item.label
          })
        })
        this.$forceUpdate()
      },
      deep: true
    },
    page: {
      handler(data) {
        this.curPage = this.page
      },
      deep: true
    },
    tableData() {
      this.checkList = []
    }
  }
}
</script>

<style lang="scss" scoped>
#table {
  position: relative;
  .table td,
  .table th {
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem;
  }
  .table tr .search_input input {
    width: 100%;
    min-width: 80px;
    background: #fff;
    border: 0;
    height: 24px;
    font-size: 12px;
    -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
    box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
    border-radius: 6px;
    border: 1px solid #e0e6ed;
    padding: 4px;
  }

  .table > tr > th {
    color: #000;
    font-weight: 700;
    font-size: 13px;
    border: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    vertical-align: top;
  }

  .table_th_title {
    min-width: 100%;
    font-size: 13px;
    height: 30px;
    line-height: 30px;
    position: relative;
    cursor: pointer;
  }

  .table_font_left {
    color: #d3d3d3;
    line-height: 30px;
    position: absolute;
    right: 10px;
  }

  .table_font_right {
    color: #d3d3d3;
    line-height: 30px;
    position: absolute;
    right: 0;
  }

  .table_th_active {
    color: #1b55e2;
  }

  .table_text {
    min-width: 100px;
    min-height: 20px;
    border: 0;
    color: #000;
    font-size: 12px;
    letter-spacing: 1px;
    white-space: nowrap;
    /*text-align: justify;*/
    /*text-justify: newspaper;*/
    /*word-break: break-all;*/
  }

  .table_text_input {
    width: 100%;
    min-width: 80px;
    height: 20px;
    line-height: 20px;
    background: #fff;
    border: 0;
    font-size: 12px;
    -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
    box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
    border-radius: 6px;
    border: 1px solid #e0e6ed;
  }

  .table_text_input:focus {
    border: 1px solid #e0e6ed;
  }

  .table tr th select {
    width: 100%;
    min-width: 80px;
    background: #fff;
    border: 0;
    font-size: 12px;
    -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
    box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
    border-radius: 6px;
    border: 1px solid #e0e6ed;
    padding: 4px;
  }

  .table tr th .checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  .table_operation {
    width: 40px;
  }

  .table tr .smallSelect {
    margin: 0 auto;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }

  .table tr .table_operation i {
    padding-left: 4px;
    font-size: 20px;
  }

  .table_checkbox {
    width: 40px;
    height: 30px;
    padding-top: 5px;
    display: flex;
    justify-content: space-between;
  }

  .table_checkbox i {
    font-size: 18px;
  }

  .table td {
    vertical-align: middle;
    padding: 0.5rem;
  }
  .table_head .table {
    margin-bottom: 0;
  }

  .table_head {
    width: calc(100% - 11px);
    height: 76px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
  }

  .table_head_noseach {
    height: 46px !important;
  }

  .table_search {
    width: 56px;
    height: 76px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1001;
  }

  .table_content {
    height: 100%;
    overflow: auto;
  }

  .table_content_noseach {
    height: 100%;
  }

  .table_scroll {
    width: 56px;
    height: calc(100% - 60px);
    background-color: #fff;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
  }

  .table_content::-webkit-scrollbar {
    width: 11px;
    height: 11px;
    background: #fff;
    border-radius: 10px; /*外层轨道*/
  }

  .table_content::-webkit-scrollbar-thumb {
    display: block;
    width: 11px;
    margin: 0 auto;
    border-radius: 10px;
    background: #ccc; /*内层轨道*/
  }
  .page {
    width: 100%;
    height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .pageCon {
    padding-top: 0.8em;
    color: #909399;
    font-weight: 600;
    border: 1px solid #e0e6ed;
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .search_btn {
    width: 45px;
    height: 30px;
    display: flex;
    justify-content: space-between;
  }

  .search_btn i {
    font-size: 18px;
    line-height: 30px;
  }
}
</style>
